<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { ref, Ref, watch, watchEffect } from 'vue';
  import { Item, ItemCollection, colorArr } from '../data';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { basicProps } from './props';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  const props = defineProps({
    ...basicProps,
    allMoneyData: {
      type: Object as PropType<ItemCollection>,
      default: () => ({}),
    },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const legendList = ref<string[]>([]);
  const axleXList = ref<string[]>([]);
  const axleYList = ref<any[]>([]);
  const unit = '元';
  const { getThemeColor } = useRootSetting();

  const sortFun = (data: Item[]) => {
    return data.sort((a: Item, b: Item) => {
      const yearA = parseInt(a.dataYear);
      const yearB = parseInt(b.dataYear);
      const monthA = parseInt(a.dataMonth);
      const monthB = parseInt(b.dataMonth);
      if (yearA !== yearB) {
        return yearA - yearB;
      }
      return monthA - monthB;
    });
  };

  watch(
    () => props.allMoneyData,
    (data) => {
      const axleYListO: any[] = [];
      const legendListO: string[] = [];
      const keys = Object.keys(data);
      const keyTarget = keys[0];
      let index = 0;
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          const formatArr = sortFun(data[key]);
          if (keyTarget === key) {
            axleXList.value = formatArr.map((item: Item) => {
              return `${item.dataMonth}月`;
            });
          }
          const yData = data[key].map((item: Item) => {
            return Number(item.dataValue);
          });
          axleYListO.push({
            name: `${key}年`,
            smooth: true,
            data: yData,
            type: 'line',
            areaStyle: {},
            itemStyle: {
              color: colorArr[index],
            },
          });
          index++;
        }
        legendListO.push(`${key}年`);
      }

      legendList.value = legendListO;
      axleYList.value = axleYListO;
    },
    { deep: true, immediate: true }
  );

  const init = () => {
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: getThemeColor.value,
          },
        },
      },
      legend: {
        data: legendList.value,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: axleXList.value,
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            type: 'solid',
            color: 'rgba(226,226,226,0.5)',
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          type: 'value',
          splitNumber: 4,
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: `{value}${unit}`,
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(255,255,255,0.2)'],
            },
          },
        },
      ],
      grid: { left: '1%', right: '1%', top: '12%', bottom: 0, containLabel: true },
      series: axleYList.value,
    });
  };
  watchEffect(() => {
    init();
  });
</script>
